<!-- table 显示字段设置 -->
<template>
  <el-drawer  v-model="drawerVisible" title="列表显示设置">
    <el-checkbox-group
    v-model="checksList" @change="checkboxChange" >
    <div id="checkbox-list">
     
     <div v-for="item in columnsList" :key="item.field" :class="item.field!=='action'?'checkbox':'action'" style="display: flex;justify-content: space-between;">
     <el-checkbox :label="item.label" :value="item.field" :disabled="item.field==='action'"/>
     <Icon v-if="item.field!=='action'"  icon="ep:rank" class="ml-5px" style="cursor:pointer;" />
    </div>
    
    </div>
  </el-checkbox-group>
    <template #footer>
      <el-button @click="resetForm">重 置</el-button>
      <el-button  type="primary" @click="submitForm">确 定</el-button>
    </template>
</el-drawer>
</template>

<script lang="ts" setup>
import Sortable from 'sortablejs'
import { getTableColumnsSortColumns } from '@/utils/tsxHelper'
defineOptions({ name: 'TableColumnSetting' })
const props =withDefaults(
  defineProps<{
    columns: any[],
    checks: any[],
  }>(),
  { columns: () => [],checks: () => []}
)

  const columnsList = ref<any[]>([])
  const checksList = ref<any[]>([])
 
watch(
  () => props.columns,
  () => {
    initList()
   
  }
)
watch(
  () => props.checks,
  () => {
    initList()
  },  
)
const initList=()=>{
  columnsList.value=getTableColumnsSortColumns([...unref(props).columns])
  checksList.value=[...unref(props).checks.map(item=>item.field)]

  nextTick(()=>{
      initCheckBoxDrag();
    })
}

const drawerVisible = ref(false) // 弹窗的是否展示
//复选框发生变化
const checkboxChange = () => {
   
}
    let sortable:Sortable
    function initCheckBoxDrag(){
      if(sortable){
        sortable.destroy();
      }
      let el = document.getElementById('checkbox-list');
      sortable = Sortable.create(el, {
        animation: 150,
        filter: `.action`,
        onEnd(evt: any) {
          // 获取被拖动的旧列
          const oldItem = columnsList.value[evt.oldIndex]
          const oldIndex = evt.oldIndex;
          const newIndex = evt.newIndex;
          const lastColumnIndex = columnsList.value.length - 1;
          if (newIndex === lastColumnIndex) {
           el!.insertBefore(evt.item, el!.children[oldIndex]);
            return; // 禁止拖动操作列
          }
          // 从原位置移除旧列
          columnsList.value.splice(evt.oldIndex, 1)
          // 将旧列插入到新的位置
          columnsList.value.splice(evt.newIndex, 0, oldItem)

          // 在DOM更新完成后重新初始化表头拖动功能
          nextTick(() => {
            // 因为table被强制重新绘制，因此需要重新监听
            initCheckBoxDrag()
          })
        }
      })
}
const emit = defineEmits([
  'columnSettingChange',
  'columnSettingReset',
])
const submitForm = () => {
  const selectedColumns = columnsList.value.filter(item => checksList.value.includes(item.field))
  //返回选定的列
  emit('columnSettingChange',selectedColumns)
  drawerVisible.value = false
}
const resetForm = () => {
  emit('columnSettingReset')
  drawerVisible.value = false
}

/** 打开抽屉 */
const open = async () => {
  drawerVisible.value = true
  initList()
}
defineExpose({ open }) // 提供 open 方法，用于打开抽屉
onMounted(() => {
      
    })
</script>
<style>
.el-drawer__footer{
  text-align: center !important;
}
</style>
